<template>
    <div ref="container">

    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component, Prop, Watch} from 'vue-property-decorator';
    import eCharts from 'echarts';

    @Component({
        mounted() {
            console.log(this.$refs.container);
            const width = document.documentElement.clientWidth;
            (this.$refs.container as HTMLDivElement).style.width = `${width}px`;
            (this.$refs.container as HTMLDivElement).style.height = `${width}px`;
            const pie = eCharts.init(this.$refs.container as HTMLDivElement);
            // let {option} = this.$props.records;
            pie.setOption(this.$props.records)
        }
    })
    export default class RecordPie extends Vue {

        @Prop(Object) records: Record<string, any> | undefined

        @Watch('records')
        onRecordsChanged(){
            const pie = eCharts.init(this.$refs.container as HTMLDivElement);
            pie.setOption(this.$props.records)
        }

    }
</script>

<style lang="scss" scoped>

</style>